<template>
  	
  	<ul class="list">
  		<li class="item" v-for="(itme,key) of city" @click="handleClick">{{key}}</li>
  	</ul>

</template>

<script>
export default {
  name: 'CityAlphabet',
  props:{
  	city:Object
  },
  methods:{
  	handleClick(e){
  		this.$emit('change',e.target.innerHTML)
  	}
  }
}

</script>

<style lang="stylus"  scoped >
	.list
		display:flex
		flex-direction:column
		justify-content:center
		position:absolute
		right:0
		top:1.95rem
		bottom:0
		width:.4rem
		.item
			line-height:.4rem
			text-align:center
			color:#00bcd4
</style>
